import React from 'react';
import { Link, Route } from 'react-router-dom';
// import Test1 from './test2-1';
// import Test2 from './test2-2';
export default function Home(props) {
  console.log('props.subRoute:', props.subRoute);
  /* 可以看出，props传递好了，能使用编程式导航 */
  /* 可以看出一级路由的遍历时，在这个组件上添加的属性：存储了二级路由列表信息，在props.subRouter里面 */
  return (
    <div>
      {/* 一级路由的视图如下: */}
      <hr />
      <hr />
      <hr />
      一级路由Home页面
      <br />
      <>&nbsp;</>
      <>&nbsp;</>
      <>&nbsp;</>
      <Link to="/Home/test1">test1</Link>
      <Link to="/Home/test2">test2</Link>
      {/* 在这渲染二级路由的视图,所以就在这配置二级路由 */}
      {/* <Route path="/Home/test1" component={Test1}></Route>
      <Route path="/Home/test2" component={Test2}></Route> */}
      {props.subRoute.map((item) => {
        return <Route key={item.path} path={item.path} 
        // component={item.component}
        render={(props)=>{
          return <item.component {...props} subRoute={item.children} ></item.component>
        }}
        ></Route>;
        console.log(item);
      })}
      <hr />
      <hr />
      <hr />
    </div>
  );
}
